<template>
	<view class="">
		<view class="main-wrap" :class="{ show: loaded }">
			<template v-if="info.status ==1|| info.status ==2">
				<view class="top-bg flex-row items-center justify-center" v-if="info.status == 2">
					<view class="top-status flex-col items-center justify-center">
						<image src="/static/img/chongdian.png" mode="" class="chong-icon"></image>
						<text class="c-time">{{ info.rechargeTime }}</text>
						<text class="text-left">充电结束</text>
					</view>
				</view>
				<view class="group-1" style="padding: 20rpx 20rpx 0 20rpx;" :class="{ marginTop: info.status == 2 }">
					<view class="active-1" style="padding: 20rpx">
						<view class="b-b" style="padding: 30rpx 0;">
							<view class="group-title">{{ info.name }}</view>
							<view class="group-s">设备编号：{{ info.num }} 车位号：{{ info.carportNum }}</view>
						</view>
						<view class="">
							<view class="group-2">
								<text class="text-left">开始时间</text>
								<text class="text-right">{{ info.startTime }}</text>
							</view>
							<view class="group-2">
								<text class="text-left">结束时间</text>
								<text class="text-right">{{ info.endTime }}</text>
							</view>
							<view class="group-2">
								<text class="text-left">订单号</text>
								<text class="text-right">{{ info.orderNum }}</text>
							</view>
							<view class="group-2">
								<text class="text-left">动作</text>
								<text class="text-right">{{ info.endReason }}</text>
							</view>
							<!-- <view class="group-2">
								<text class="text-left">车牌号</text>
								<text class="text-right">{{ info.license }}</text>
							</view> -->
							<view class="group-2">
								<text class="text-left">充电时长</text>
								<text class="text-right">{{ info.rechargeTime }}</text>
							</view>
							<view class="group-2">
								<text class="text-left">充电度数</text>
								<text class="text-right">{{ info.electric }}度</text>
							</view>
							<view class="group-2">
								<text class="text-left">SOC</text>
								<text class="text-right">{{ info.soc }}%</text>
							</view>
							<view class="flex-row justify-between" style="height:80rpx;">
								<text class="text-right">充电费用</text>
								<view class="flex-col items-end">
									<view class="text-right" style="color:#F5243E;">￥{{ info.electricCharge }}</view>
									<view class="text-left" style="font-size: 24rpx;">电费{{ info.electricCharge }} | 服务费{{ info.serviceCharge }}</view>
								</view>
							</view>
							<view class="group-2" v-if="info.discounts">
								<text class="text-left">月卡优惠</text>
								<text class="text-right">-￥{{ info.discounts}}</text>
							</view>
							<view class="group-2">
								<text class="text-right">实际合计</text>
								<text class="text-right" style="color:#F5243E;">￥{{ info.price }}</text>
							</view>
						</view>
					</view>
					<block v-if="info.status == 1">
						<view class="active-1" style="margin-top: 30rpx;">
							<view class="title" style="padding: 20rpx 0;">支付方式</view>
							<view class="btn-circle btn flex-row items-center justify-between">
								<view class="flex-row items-center">
									<image src="/static/img/wexin.png" mode="" class="pay-icon"></image>
									<!-- <u-icon name="/static/img/wexin.png" size="36"></u-icon> -->
									<text class="text-left" style="padding-left: 30rpx;color: #666666;">微信支付</text>
								</view>
								<u-icon name="checkmark-circle-fill" size="36" color="#429EFE"></u-icon>
							</view>
							<!-- <view class="btn-circle btn flex-row items-center justify-between" style="margin-top: 30rpx;">
								<view class="flex-row items-center">
									<image src="/static/img/yhk.png" mode="" class="pay-icon"></image>
									<text class="text-left" style="padding-left: 30rpx;color: #666666;">电卡支付（￥{{userInfo.balance}}）</text>
								</view>
								<u-icon name="checkmark-circle-fill" size="36" color="#429EFE" ></u-icon>
							</view> -->
						</view>
						<view class="btn-fill btn" hover-class="hover-opacity" @click="pay">支付</view>
					</block>
				</view>
			</template>
			<!-- "status":""//0充电中1待支付2已完成 -->
			<template v-if="info.status == 0 || info.status == -1">
				<view class="group-1">
					<view class="active-1">
						<view class="background">
							<view class="b-b group-1-info" style="padding:10rpx;color: #1DC5D8;">
								<view class="top">
									<view class="group-t">设备编号：{{ info.num || '' }}</view>
									<text class="group-t" v-if="info.license">车牌号：{{ info.license || '' }}</text>
								</view>
								
								<view class="group-t" style="padding-bottom: 20rpx;" v-if="info.type == 0">充电策略：充满自停</view>
								<view class="group-t" style="padding-bottom: 20rpx;" v-if="info.type == 1">充电策略：限定{{ info.money || '' }}元</view>
								<view class="group-t" style="padding-bottom: 20rpx;" v-if="info.type == 2">充电策略：限定soc{{ info.soc || '' }}%</view>
							</view>
							<!-- <view class="flex-row items-center justify-center" style="padding: 50rpx 0;">
								<view class="top-status1 flex-col items-center justify-center">
									<text class="group-t-time">{{ info.electric || '-' }} 度</text>
									<text class="text-left" style="color:#246697;">已充电量</text>
								</view>
							</view> -->
							<view class="image-muster" style="padding: 50rpx 0;">
								
								<view class="arrow">
									<image src="../../static/img/arrow.png" mode=""></image>
								</view>
								<view class="panel">
									<image src="../../static/img/panel.png" mode=""></image>
								</view>
								<!-- <view class="highlight">
									<image src="../../static/img/highlight.png" mode=""></image>
								</view> -->
								<view class="content" v-if="Number(info.soc) > 0">
									<cmd-circle stroke-background="rgba(0,0,0,0)" stroke-color="#fd6804" cid="circle30" :width="130" :showInfo="false" :stroke-width="13" type="dashboard" :percent="Number(info.soc)"></cmd-circle>
									<view class="percentage">
										{{info.soc || ''}}
										<text>%</text>
									</view>
									<view class="text">
										已充电量
									</view>
								</view>
								<view class="content" v-else>
									<cmd-circle stroke-background="rgba(0,0,0,0)" stroke-color="#fd6804" cid="circle30" :width="130" :showInfo="false" :stroke-width="13" type="dashboard" :percent="info.soc ? Number(info.soc) : Number(info.electric)"></cmd-circle>
									<view class="percentage">
										{{ info.electric || ''}}
										<text>度</text>
									</view>
									<view class="text">
										已充电量
									</view>
								</view>
							</view>
							<view class="flex-row items-center justify-between usage">
								<text class="text-right usage-text">电压(V) {{ info.voltage || '-' }}</text>
								<text class="text-right usage-text">电流(A) {{ info.electricity || '-'}}</text>
								<text class="text-right usage-text">功率(w) {{ info.power || '-'}}</text>
							</view>
						</view>
						
						<view class="background-info">
							<view class="flex-row items-center group-3" >
								<view class="flex-col items-center justify-center fill" v-if="Number(info.soc) > 0">
									<text class="group-title" style="color:#FE642B;">{{ info.electric || '' }}度 </text>
									<text class="text-left">已充电量</text>
								</view>
								<view class="flex-col items-center justify-center fill" v-else>
									<text class="group-title" style="color:#FE642B;">{{ info.soc || '' }}% </text>
									<text class="text-left">已充电量</text>
								</view>
								<view class="flex-col items-center justify-center fill">
									<text class="group-title" style="color:#FE642B;"> {{ info.rechargeTime || '-' }}</text>
									<text class="text-left">已充时长</text>
								</view>
								<view class="flex-col items-center justify-center fill">
									<text class="group-title" style="color:#FE642B;">
										<text style="font-size: 22rpx;">￥</text>
										<text></text>
										{{ info.price || '' }}
									</text>
									<text class="text-left">电费合计</text>
								</view>
							</view>
							<view class="group-btn new-btn" hover-class="hover-opacity" style="margin: 30rpx 0;" @click="endChange">结束充电</view>
						</view>
						
					</view>
				</view>
			</template>
			<!-- "status":""//0充电中1待支付2已完成 -->
			<view class="" style="padding: 0 20rpx 48rpx;background: #003C4E;" v-if="info.status!=1">
				<view class="con flex-row items-center new-con">
					<view class="item flex-col items-center justify-center" hover-class="hover-dark" @click="navTo('/pages/public/question')">
						<image src="/static/img/problem.png" mode="" class="item-icon"></image>
						<text class="item-title">常见问题</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark" @click="callphone(info.phone)">
						<image src="/static/img/contact.png" mode="" class="item-icon"></image>
						<text class="item-title">联系客服</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark" @click="navTo(`/pages/public/declare`)">
						<image src="/static/img/fault.png" mode="" class="item-icon"></image>
						<text class="item-title">故障保修</text>
					</view>
				</view>
			</view>
		</view>

		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import cmdCircle from "@/components/cmd-circle/cmd-circle.vue"
export default {
	components: {cmdCircle},
	data() {
		return {
			type: 2,
			id: '',
			info: {},
			userInfo:{},
			setInter:null
		};
	},
	onLoad(options) {
		if (options.id) this.id = options.id;
		this.loadData();
		this.getUserInfo();	
	},
	onUnload() {
		if(this.setInter) clearInterval(this.setInter);
	},
	methods: {
		async endChange(){
			const res = await this.$request('recharge/end', { num: this.info.num }, { showLoading: true });
			if (res.result == 0) {
				uni.showModal({
					showCancel:false,
					confirmText:'返回',
					content:"提交成功!请耐心等待，系统正在结算中",
					success(options) {
						uni.navigateBack();
					}
				})
				// this.$util.msg('提交成功!如');
				
				// this.getCurrentTime();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async loadData() {
			const res = await this.$request('recharge/record-detail', { id: this.id });
			if (res.result == 0) {
				if(res.data.electric) res.data.electric=Number(res.data.electric).toFixed(2);
				
				this.info = res.data;
				// this.info.status = 1
				// if(this.info.id == '9e98651e4c004478a71084ce0f9aa0cb'){
				// 	this.info.status = 0
					
				// 	console.log(this.info);
				// }
				
				if(this.setInter == null && res.data.status == 0) {
					if(this.setInter) clearInterval(this.setInter);
					this.start()
				}
				if(this.setInter == null && res.data.status == -1) {
					if(this.setInter) clearInterval(this.setInter);
					this.start()
				}
				// this.getCurrentTime();
			} else {
				this.$util.msg(res.resultNote);
				this.back();
			}
		},
		start(){
			this.setInter = setInterval(()=>{
				this.loadData()
			},3000)
		},
		async pay(){
			var payType = '0'
			// #ifdef APP-PLUS
			payType = '2'
			// #endif
			const data = {
				orderId:this.id,
				uid:uni.getStorageSync('uid'),
				price:this.info.price,
				payType
			}
			const res = await this.$request('user/pay-order',data, { showLoading: true });
			if (res.result == 0) {
				this.PaySingData(res.data.body);
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		PaySingData(data) {
			console.log(data)
			let that = this;
			var form = {
				timeStamp: data.timestamp,
				nonceStr: data.noncestr,
				package: `prepay_id=${data.prepayid}`,
				signType: data.signType,
				paySign: data.sign,
			}
			// #ifdef APP-PLUS
			form = {
				orderInfo: data
			}
			// #endif
			uni.requestPayment({
				...form,
				success(res) {
					uni.redirectTo({
						url:`/pages/order/orderes?id=${that.id}&money=${that.info.price}`
					})
					
				},
				fail(res) {
		           
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.main-wrap{
	height: 100vh;
	background: #003C4E;
}	

.pay-icon {
	width: 40rpx;
	height: 36rpx;
}
.btn-circle {
	border: 1rpx solid #e7e7e7;
	padding: 0 44rpx;
}
.btn-fill {
	background: $uni-color-bg;
	font-size: 30rpx;
	color: #000000;
	margin: 30rpx 0;
}
.btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
}

.marginTop {
	margin-top: -120rpx;
}
.group-3 {
	height: 176rpx;
	
	border-radius: 10rpx;
	margin-top: 30rpx;
}
.group-btn {
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	background: #246697;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
}
.chong-icon {
	width: 60rpx;
	height: 33rpx;
}
.c-time {
	font-size: 44rpx;
	font-weight: bold;
	color: #000000;
	padding: 10rpx 0;
}
.group-2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70rpx;
}
.group-s {
	font-size: 22rpx;
	font-weight: 500;
	color: #3E7383;
	padding-top: 20rpx;
}
.group-t-time {
	font-size: 60rpx;
	font-weight: bold;
	color: #246697;
}
.group-t {
	font-size: 26rpx;
	font-weight: 500;
	color: #86878b;
	line-height: 47rpx;
}
.group-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #04F1FB;
}
.text-left {
	font-size: 26rpx;
	font-weight: 500;
	color: #04F1FB;
}
.text-right {
	font-size: 26rpx;
	font-weight: 500;
	color: #5C8F9E;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
	max-width: 75%;
}
.top-bg {
	width: 750rpx;
	height: 460rpx;
	background: #003C4E;
	padding-bottom: 120rpx;
}
.top-status {
	width: 254rpx;
	height: 254rpx;
	background: #ffffff;
	border-radius: 50%;
}
.top-status1 {
	width: 254rpx;
	height: 254rpx;
	background: #eff8ff;
	border-radius: 50%;
}

.group-1 {
	z-index: 99;
}
.active-1 {
	border-radius: 20rpx;
}

.group-1-info{
		width: 600rpx;
		margin: 0 auto;
		&::after{
			border: none;
		}
		.top{
			display: flex;
			justify-content: space-between;
			
		}
		
		.group-t{
			font-size: 24rpx;
			color: #1DC5D8;
		}
	}



// 底部
.item {
	width: 33.333%;
	padding: 25rpx 0;
}
.con {
	// height: 187rpx;

	box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
	border-radius: 20rpx;
	padding: 25rpx 30rpx;
}
.item-icon {
	width: 86rpx;
	height: 86rpx;
}
.item-title {
	font-size: 24rpx;
	font-weight: 500;
	color: #1DC5D8;
	padding-top: 10rpx;
}
.background{
	background: linear-gradient(0deg, #003C4E, #000E26);
	padding: 40rpx 40rpx 20rpx 40rpx;
	.image-muster{
		position: relative;
		height: 461rpx;
		.arrow{
			position: absolute;
			width: 677rpx;
			height: 92rpx;
			top: 223rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.panel{
			position: absolute;
			top: 93rpx;
			left: 160rpx;
			width: 341rpx;
			height: 341rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.highlight{
			position: absolute;
			width: 389rpx;
			height: 122rpx;
			left: 160rpx;
			top: 331rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			position: absolute;
			top: 130rpx;
			left: 200rpx;
			.percentage{
				width: 200rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-65%);
				color: #1DC5D8;
				font-size: 60rpx;
				text-align: center;
			}
			.text{
				font-size: 24rpx;
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #3E7383;
			}
		}
		
	}
	.usage{
		.usage-text{
			
			font-size: 24rpx;
			font-weight: 500;
			color: #5C8F9E;
		}
	}
}
.background-info{
	padding: 20rpx 20rpx;
	width: 750rpx;
	
	background: #003C4E;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,22,45,0.2800);
	.group-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #04F1FB !important;
	}
	.text-left {
		font-size: 26rpx;
		font-weight: 500;
		color: #5C8F9E !important;
	}
	.new-btn{
		background: $uni-color-bg;
		border-radius: 45rpx;
		color: #000000;
	}
}
.new-con{
	box-shadow: none;
	padding: 0 30rpx 24rpx;
	
}

</style>
